// 注释
/* 普通注释  会保留到编译后的文件中 */
// 静默注释  只保留在SASS源文件中，编译后被省略。


// 变量
// 变量名以$开头(变量:值;)  
// 解析: 在scss文件中可以提前定义变量,存储公共数据 ,scss文件便以为css是 会被替换为对应的值

// 用法
// 1. 存储公共数据
// 2. 变量可以和 css选择器,css属性名,css属性值拼接(插值语句)

$hot: #f10215;
$grey: #999;
$success: #99CCCC;
$cool: #0099CC;
$warm: #FFCCCC;
$live: #FF9999;

$typeArea: 1226px; //版心宽度

$side: left;


// 计算 (+ - * / %)
// scss文件中可以进行数值运算 => 编译时会直接输出运算的结果

// 加法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 减法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 乘法: 一个有单位,一个没有单位  
// 除法: 一个有单位,一个没有单位  或者 两个都有单位(单位舍去 倍数  200px/2px => 100)


// 函数  => sass中允许自定义函数
@function pxtorem($val) {
    // @return calc($val/100px)*1rem;
    @return #{calc($val/100px)}rem;
}


// 继承
// 让一个类 继承 另一个类 的属性和方法 
// @extend 在解析过程中将被继承的类(.w)和继承的类(.header) 整合到一起 形成群组选择器
// 补充:
// 如果不想将 被继承的类 解析到css文件中, 类名可以 以%开头(自定义)

// .w {
//     width: $typeArea;
//     margin: 0 auto;
// }

// .header {
//     @extend .w;
//     background-color: $cool;
// }

// .container {
//     @extend .w;
//     background-color: $grey;
// }

// .banner {
//     @extend .w;
// }

// .footer {
//     @extend .w;
// }



%w {
    width: $typeArea;
    margin: 0 auto;
}

.header {
    @extend %w;
    background-color: $cool;
}

.container {
    @extend %w;
    background-color: $grey;
}

.banner {
    @extend %w;
}

.footer {
    @extend %w;
}